<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1——使用jsx创建DOM</title>
    <!--预先设计好一个样式-->
    <style>
        .title{
            background-color: orange;
            width: 200px;
        }
    </style>
</head>
<body>
    <!--   准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--引入react-dom 用于支持react操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript"  src="../js/babel.min.js"></script>
    
    
    <!--表示我写的不再是js而是jsx，靠babel来把js翻译为jsx-->
    <script type="text/babel"> //此处一定要写babel
       const myId="aTgUIgu"
       const myData="Hello,React"
       //1. 创建虚拟DOM
       const VDOM=(
           <div>
                <h2 className='title' id={myId.toLocaleLowerCase()}>
                    <span style={{color:'white', fontSize:'29px'}}>
                         {myData.toLocaleLowerCase()}
                    </span>
                </h2>
                <h2 className='title' id={myId.toLocaleUpperCase()}>
                    <span style={{color:'white', fontSize:'29px'}}>
                        {myData.toLocaleLowerCase()}
                    </span>
                </h2>
                <input type="text"/>
        </div>
          
       )
       ReactDOM.render(VDOM,document.getElementById("test"))

       /*
       JSX语法规则
       1. 定义虚拟DOM时不要写引号
       2. 标签中混入js表达式时要用花括号
       3. 样式的类名指定不要用class，要用className
       4. 内联样式要用{{key1:"value1",key2:"value2"...}}写
        style={js变量{object}}
        {color:'white'}中的white需要加上引号，不然就是在寻找whilte变量
       5. JSX要求只能有一个根标签  有多个标签的时候可以用<div>解决
       6.标签必须闭合 <input></input> 必须有闭合标签
       7. 标签首字母
          (1)若小写字母开头，则将该标签转为html中同名元素；若html中无该标签对应的同名元素，则报错
          (2)若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错


       */
    </script>
    
</body>
</html>